<template>
	<view class="page-container padd30">
		<view class="padd30 content">
			<view class="title">在线报名</view>
			<view class="key">您的姓名:</view>
			<view class="val">
				<input v-model="data.name" placeholder="请输入您的姓名" />
			</view>
			<view class="key">您的性别:</view>
			<view class=" sex">
				<uni-section title="单选" type="line">
							<uni-data-checkbox v-model="data.sex" :localdata="sex"></uni-data-checkbox>
						</uni-section>
			</view>
			<view class="box">
			</view>
			<view class="key">联系方式:</view>
			<view class="val">
				<input v-model="data.phone" placeholder="请输入联系方式" type="number" />
			</view>
			<view class="key">毕业院校:</view>
			<view class="val">
				<input v-model="data.school" placeholder="请输入毕业院校" />
			</view>
			<view class="key">毕业年份:</view>
			<view class="val">
				<input v-model="data.year" placeholder="请输入毕业年份" />
			</view>
			<view class="key">毕业证书编号（选填）:</view>
			<view class="val">
				<input v-model="data.code" placeholder="请输入毕业证书编号" />
			</view>
			<view class="key">入住意向:</view>
			<!-- <view class="val">
				<input v-model="data.spare" placeholder="请输入毕业证书编号" />
			</view> -->
			<uni-section title="单选" type="line">
						<uni-data-checkbox multiple v-model="data.spare" :localdata="streetArray"></uni-data-checkbox>
					</uni-section>
			</view>
			<view class="bigBtn" @click="post">提交</view>
		</view>
		<view style="background-image: url(https://www.baoanzulin.cn/images/street.png);background-size: cover;background-position: center;
		background-repeat: no-repeat;width: 99%;height: 1000rpx; margin-top: 20rpx;">
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();


	const data = ref({
		name: null,
		sex: null,
		phone: null,
		school: null,
		year: null,
		code: null,
		spare: "",
		create_user_id: null,
	})
	
	function radioChange(val){
		data.value.sex = val
	}
	
	const sex = ref( [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}])
	const streetArray = ref([])

	onLoad((e) => {
		uni.login({
			success: (res) => {
				proxy.$request({
					url: `${proxy.$api.getWxUserInfo}` + '?code=' + res.code,
					data: "",
					method: "POST"
				}).then(res => {
					data.value.create_user_id = res.data.id
				});
			}
		})
		
		proxy.$request({
			url: `${proxy.$api.getStreet}`,
			method: "POST",
		}).then(res => {
			streetArray.value = res.data.map(item => ({ text: item.name, value: item.id }));
		})
	})

	function post() {
		var msg = "";
		console.log(data.value);
		if(data.value.spare == ""){
			msg = "请填选择入住意向";
		}
		if(data.value.year == null && data.value.year != ""){
			msg = "请填写毕业年份";
		}
		if(data.value.school == null && data.value.school != ""){
			msg = "请填写毕业院校";
		}
		if(data.value.phone == null && data.value.phone != ""){
			msg = "请填写电话号码";
		}
		if(data.value.sex == null){
			msg = "请选择性别";
		}
		if(data.value.name == null && data.value.name != ""){
			msg = "请填写姓名";
		}
		
		if(msg != ""){
			uni.showModal({
				title: '提示信息',
				content: msg,
				showCancel: false, // 不显示取消按钮
				success: (res) => {}
			});
		}else{
			proxy.$request({
				url: `${proxy.$api.addDetail}`,
				data: data.value,
				method: "POST"
			}).then(res => {
				if(res.statu){
					uni.showModal({
						title: '活动报名成功',
						// content: '填写资料获取优惠券',
						showCancel: false, // 不显示取消按钮
						success: (res) => {
							uni.navigateTo({
								url: "/pages/enroll/infoList"
							})
						}
					});
				}
			});
		}
	}

	onShow(() => {

	})
</script>

<style lang="less" scoped>
	.content {
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0px 0px 8px 0px rgba(55, 123, 245, 0.08);
		
		.ditu{
			width: 300rpx;
			height: 300rpx;
			background-image: url(../../static/img/street.png);
			background-size: cover;
		}
	}
	
	.sex{
		radio{
			
		}
	}

	.title {
		text-align: center;
		font-size: #333;
		font-size: 36rpx;
		font-weight: bold;
	}

	.key {
		font-size: 28rpx;
		color: #333;
		font-weight: normal;
		margin: 30rpx 30rpx 15rpx 0;
	}

	.val {
		border: 2rpx solid #f8f8f8;
		border-radius: 8rpx;
		padding: 15rpx;

		input {
			line-height: 56rpx;
			font-size: 28rpx;
		}
	}

	.bigBtn {
		margin-top: 30rpx;
	}
</style>
